﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="themes/icon.css" />
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    <script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
</head>

<body class="easyui-layout" id="layout">
    <!-- 面板 -->
    <div data-options="region:'north'" style="height:30px">
        <center>后台管理系统</center>
    </div>
    <div data-options="region:'south',split:true" style="height:30px;">bottom</div>
    <div data-options="region:'west',split:true" title="菜单" style="width:200px;overflow-x: hidden;">
        <div class="easyui-accordion" style="width:100%;min-height:100%; ">
            <div title="系统管理" style="padding:10px;">
                <ul class="easyui-tree">
                    <li><a href="#" onclick="addPanel('系统管理')">系统管理</a></li>
                    <li><a href="#" onclick="addPanel('用户管理')">用户管理</a></li>
                    <li><a href="#" onclick="addPanel('用户列表')">用户列表</a></li>
                    <li><a href="#" onclick="addPanel('权限管理')">权限管理</a></li>
                    <li><a href="#" onclick="addPanel('系统管理')">系统管理</a></li>
                    <li><a href="#" onclick="addPanel('用户管理')">用户管理</a></li>
                    <li><a href="#" onclick="addPanel('用户列表')">用户列表</a></li>
                    <li><a href="#" onclick="addPanel('权限管理')">权限管理</a></li>
                    <li><a href="#" onclick="addPanel('系统管理')">系统管理</a></li>
                    <li><a href="#" onclick="addPanel('用户管理')">用户管理</a></li>
                    <li><a href="#" onclick="addPanel('用户列表')">用户列表</a></li>
                    <li><a href="#" onclick="addPanel('权限管理')">权限管理</a></li>
                    <li><a href="#" onclick="addPanel('系统管理')">系统管理</a></li>
                    <li><a href="#" onclick="addPanel('用户管理')">用户管理</a></li>
                    <li><a href="#" onclick="addPanel('用户列表')">用户列表</a></li>
                    <li><a href="#" onclick="addPanel('权限管理')">权限管理</a></li>
                    <li><a href="#" onclick="addPanel('系统管理')">系统管理</a></li>
                </ul>
            </div>
            <div title="用户管理" style="padding:10px;">
                <ul class="easyui-tree">
                    <li><a href="#" onclick="addPanel('系统管理')">系统管理</a></li>
                    <li><a href="#" onclick="addPanel('用户管理')">用户管理</a></li>
                    <li><a href="#" onclick="addPanel('用户列表')">用户列表</a></li>
                    <li><a href="#" onclick="addPanel('权限管理')">权限管理</a></li>
                </ul>
            </div>
            <div title="权限管理" style="padding:10px;">
                <ul>
                    <li><a href="#" onclick="addPanel('系统管理')">系统管理</a></li>
                    <li><a href="#" onclick="addPanel('用户管理')">用户管理</a></li>
                    <li><a href="#" onclick="addPanel('用户列表')">用户列表</a></li>
                    <li><a href="#" onclick="addPanel('权限管理')">权限管理</a></li>
                </ul>
            </div>
            <div title="用户列表" style="padding:10px;">
                <ul>
                    <li><a href="#" onclick="addPanel('系统管理')">系统管理</a></li>
                    <li><a href="#" onclick="addPanel('用户管理')">用户管理</a></li>
                    <li><a href="#" onclick="addPanel('用户列表')">用户列表</a></li>
                    <li><a href="#" onclick="addPanel('权限管理')">权限管理</a></li>
                </ul>
            </div>
        </div>
        <!--<ul id="myUl" class="easyui-tree">
            <li>
                <a onclick="addPanel('系统管理')"><span>系统管理</span></a>
            </li>
            <li>
                <a onclick="addPanel('用户管理')"><span>用户管理</span></a>
            </li>
            <li>
                <a onclick="addPanel('用户列表')"><span>用户列表</span></a>
            </li>
            <li>
                <a onclick="addPanel('权限管理')"><span>权限管理</span></a>
            </li>
        </ul>-->
    </div>
    <div data-options="region:'center'" style="background:#eee;">
        <div id="tt" class="easyui-tabs" data-options="region:'center',tools:'#tab-tools',plain:true,border:false"
             style="width:100%;height:100%;">
            <div title="欢迎" style="padding:10px; width:100%;">
                欢迎使用后台管理系统
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var index = 0;
    function addPanel(title) {
        // 假设你的 tabs 组件的 ID 是 'tt'
        var tabs = $('#tt').tabs('tabs'); // 获取所有 tabs 的信息

        // 遍历所有 tabs，查找标题为 'title' 的 tab
        var tab = $.grep(tabs, function (t) {
            return t.panel('options').title === title;
        })[0];

        if (tab) {
            var i = tab.panel('options').index;
            $('#tt').tabs('select', i);
        } else {
            $('#tt').tabs('add', {
                title: title,
                content: '<iframe scrolling="auto" frameborder="0"  src="https://www.baidu.com" style="width:100%;height:100%;"></iframe>',
                closable: true
            });
        }
    }
    function removePanel() {
        var tab = $('#tt').tabs('getSelected');
        if (tab) {
            var index = $('#tt').tabs('getTabIndex', tab);
            $('#tt').tabs('close', index);
        }
    }
    $(function () {
        //解决闪屏的问题
        window.setTimeout(function () {
            $("#layout").css("visibility", "visible");
        }, 800);
    });
</script>

</html>